<script setup>
import { ref, onMounted } from 'vue'
import ScreenMap from '@rev-ai/screen-map'

const mapRef = ref()

const svgPath =
  'https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/cmap_1903_1fd9f1966d9d4b0baa09471652f703e2.svg'
const align_params = {
  img_width: 4000,
  img_height: 4000
}

onMounted(() => {
  const map = new ScreenMap(mapRef.value)
  // 基于svg和对齐参数创建地图
  map.addMapFromSvg(svgPath, align_params)
  // 地图上添加一个图层
  map.addLayer({ moveable: true, selectable: true }, 'layer1')
  // 在图层上加入poi
  map.setPois(
    Array.from({ length: 10 }).map(() => {
      const name = `${Math.floor(Math.random() * 10000)}`
      return {
        iconSize: [40, 40],
        name,
        icon: 'https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/ace27dc6b8384e8c9ccd70ff7b46e400_c2.png',
        offsetY: 20,
        text: name,
        angle: Math.floor(Math.random() * 360),
        x: Math.floor(Math.random() * align_params.img_width),
        y: Math.floor(Math.random() * align_params.img_height)
      }
    }),
    'layer1'
  )
  // 添加覆盖层
  const overlay = map.addOverlay({
    element: document.querySelector('#overlay'),
    className: 'my-overlay',
    offset: [0, -10]
  })

  // 添加事件
  map.addEventListener('poi-click', (ev) => {
    const { poi, position, coordinate } = ev.detail
    // 点击layer1图层，更新图标
    if (poi.getLayerKey() === 'layer1') {
      poi.updateData({
        icon: 'https://prod-deployment.oss-cn-hangzhou.aliyuncs.com/ab3d081187a14e5ea07e5c3b16829513_c1.png'
      })
    }
    // 设置覆盖层位置，并显示
    overlay.setPosition(coordinate)
    overlay.show()
    // overlay.hide();
  })

  setTimeout(() => {
    // 设置3D
    map.setRender3D()
  }, 5000)
})
</script>
<template>
  <div class="test-map" ref="mapRef"></div>
</template>
<style lang="less">
.test-map {
  width: 100%;
  height: 100%;
}
</style>
